{% extends 'BlogBundle::layout.html.twig' %}
{%block title%} Add new article {% endblock%}
{% block javascripts %}
<script type="text/javascript" src="{{asset('bundles/blog/js/ckeditor/ckeditor.js')}}">
</script>
{% endblock %}

{% block btcontent %}
<div>
     {#% include "BlogBundle:Blog:newblog.html.twig" with { product: 1 } %#}
     {#% render "BlogBundle:Blog:addNewBlog" with { product: 1 } %#}
</div>

<h4>{{'this is 1 text + string' ~ ' => ' ~ blog_replace('this is 1 text + string')}}</h4>
    
<div class="addNewArtContent">
    <fieldset>
        <legend>Add new artcle</legend>
        <div>
            {% if app.session.hasFlash('statusAdd') %} 
            <h5 style="color: Red"> 
                {{ app.session.flash('statusAdd') }} 
            </h5>
            {% endif %}
            {% form_theme formart 'BlogBundle:blog_field:text_widget.html.twig' %}
            <form action="" method="post" {{ form_enctype(formart)}} >
                  {% if formart.title is defined %}
                {{form_label(formart.title)}}:{{form_widget(formart.title)}}<span style="color:red">{{form_errors(formart.title)}}</span>
                {% endif %}
                <p>
                {{form_label(formart.image)}}: {{form_widget(formart.image)}}<div style="color:red">{{form_errors(formart.image)}}</div>
                </p>
                <p>
                {{form_label(formart.category)}}: {{form_widget(formart.category)}}
                </p>
                <p>
                {{form_label(formart.content)}}: {{form_widget(formart.content)}}
                </p>
                <p>
                {{form_label(formart.active)}}: {{form_widget(formart.active)}}
                </p>
                <h3>Tags</h3>
                <ul class="tags" {% if formart.tags.vars.prototype is defined %} data-prototype="{{ form_widget(formart.tags.vars.prototype.name)|e }}" {% endif %}>
                    {% for tag in formart.tags %}
                    <li>{{ form_widget(tag.name) }}</li>
                    {% endfor %}
                </ul>
                {{form_rest(formart)}}
                <input type="submit" value="OK" />
            </form>
        </div>

    </fieldset>
</div>
<script type="text/javascript">
    CKEDITOR.replace( 'blog_blogbundle_newsarticletype_content',
    {
        toolbar :[[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],[ 'UIColor' ]] 
    });
    
                // Get the div that holds the collection of tags
                var collectionHolder = $('ul.tags');
                
                // setup an "add a tag" link
                var addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
                var newLinkLi = $('<li></li>').append(addTagLink);
                
                jQuery(document).ready(function() {
                // add the "add a tag" anchor and li to the tags ul
                collectionHolder.append(newLinkLi);
                
                addTagLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();
                
                // add a new tag form (see next code block)
                addTagForm(collectionHolder, newLinkLi);
            });
        });
        function addTagForm(collectionHolder, $newLinkLi) {
        // Get the data-prototype we explained earlier
        var prototype = collectionHolder.attr('data-prototype');
        
        // Replace '$$name$$' in the prototype's HTML to
        // instead be a number based on the current collection's length.
        var newForm = prototype.replace(/\$\$name\$\$/g, collectionHolder.children().length);
        
        // Display the form in the page in an li, before the "Add a tag" link li
        var $newFormLi = $('<li></li>').append(newForm);
        $newLinkLi.before($newFormLi);
    }
</script>
{% endblock %}

